<template>
	<view>
		<view class="pt-60 pb-60 cfs-353535 h-40 fs-40 text-align-center">分类管理</view>
		<view class="pl-80 pr-80  fs-30 cfs-3535 text-align-center" style="line-height: 1.5;">长按拖动分类可排序，轻触你添加的分类可编辑。</view>
		<view class="pl-60 h-60 flex f-ai-center">
			<view @click="change(false)" class="pt-16 pb-16 pl-26 pr-26 fs-24 radius-12 mr-16"
				:class="!positive ? 'cfs-62b27c cbg-eef7f2' : 'cfs-b9b9b9 cbg-f2f2f2'">支出</view>
			<view @click="change(true)" class="pt-16 pb-16 pl-26 pr-26 fs-24 radius-12"
				:class="positive ? 'cfs-e6b956 cbg-fcf9ee' : 'cfs-b9b9b9 cbg-f2f2f2'">入账</view>
		</view>

		<u-transition :show="!positive" mode="fade">
			<view class="pt-64 pl-66 pr-66 grid"
				style="grid-template:200rpx/repeat(4,1fr);gap:0 76rpx;grid-auto-rows: 200rpx;">
				<view v-for="item in zhiChuType" :key="item.id" class="flex f-column-nowrap f-ai-center"
					@click="editCategory(item)">
					<view class="w-80 h-80 cbg-62b27c flex f-ai-center f-jc-center" style="border-radius: 50%;"><text
							:class="`cfs-fff fs-40 iconfont ${item.iconName}`"></text></view>
					<view class="pt-34 cfs-353535 fs-24">{{ item.name }}</view>
				</view>
				<view class="flex f-column-nowrap f-ai-center" @click="show = true">
					<view class="w-74 h-74 cbg-fff flex f-ai-center f-jc-center" style="border-radius: 50%;border-style: dotted;">
						<text class="cfs-b9b9b9 fs-40 iconfont icon-plus"></text>
					</view>
					<view class="pt-34 cfs-353535 fs-24">添加</view>
				</view>

			</view>
		</u-transition>


		<u-transition :show="positive" mode="fade">
			<view class="pt-64 pl-66 pr-66 grid"
				style="grid-template:200rpx/repeat(4,1fr);gap:0 76rpx;grid-auto-rows: 200rpx;">
				<view v-for="item in shouRuType" :key="item.id" class="flex f-column-nowrap f-ai-center"
					@click="editCategory(item)">
					<view class="w-80 h-80 cbg-e6b956 flex f-ai-center f-jc-center" style="border-radius: 50%;"><text
							:class="`cfs-fff fs-40 iconfont ${item.iconName}`"></text></view>
					<view class="pt-34 cfs-353535 fs-24">{{ item.name }}</view>
				</view>
				<view class="flex f-column-nowrap f-ai-center" @click="show = true">
					<view class="w-74 h-74 cbg-fff flex f-ai-center f-jc-center" style="border-radius: 50%;border-style: dotted;">
						<text class="cfs-b9b9b9 fs-40 iconfont icon-plus"></text>
					</view>
					<view class="pt-34 cfs-353535 fs-24">添加</view>
				</view>
			</view>
		</u-transition>

		<view>
			<u-modal :show="show" title="添加分类" showCancelButton confirmColor="#62b27c" closeOnClickOverlay @close="cancel"
				@cancel="cancel" @confirm="confirm">
				<u--input placeholder="不能和已有类型名重复" maxlength="4" clearable showWordLimit focus border="surround"
					v-model="inputValue"></u--input>
			</u-modal>

			<u-modal :show="editShow" title="添加分类" showCancelButton confirmColor="#62b27c" closeOnClickOverlay @close="cancel"
				@cancel="editCancel" @confirm="editConfirm">
				<u--input placeholder="不能和已有类型名重复" maxlength="4" clearable showWordLimit focus border="surround"
					v-model="editInputValue"></u--input>
			</u-modal>
		</view>




	</view>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState: CategoryMapState, mapActions: CategoryMapActions } = createNamespacedHelpers('Category')
export default {
	name: 'CategoryPage',
	data() {
		return {
			positive: false, //true:收入(入账) false:支出
			show: false,
			inputValue: '',
			editShow: false,
			editInputValue: '',
			editCurrentData: {}

		}
	},
	computed: {
		...CategoryMapState({
			zhiChuType: 'zhiChuType',
			shouRuType: 'shouRuType',
		})
	},
	methods: {
		...CategoryMapActions({
			asyncAddZhiChuCategory: 'asyncAddZhiChuCategory',
			asyncAddShouRuCategory: 'asyncAddShouRuCategory',
			asyncUpdateZhiChuCategory: 'asyncUpdateZhiChuCategory',
			asyncUpdateShouRuCategory: 'asyncUpdateShouRuCategory'
		}),

		change(v) {
			if (v === this.positive) return
			this.positive = v
		},
		cancel() {
			this.inputValue = ''
			this.show = false;
		},
		async confirm() {
			const addFn = this.positive ? this.asyncAddShouRuCategory : this.asyncAddZhiChuCategory
			const length = this.positive ? this.shouRuType.length : this.zhiChuType.length
			const params = { name: this.inputValue, sort: length, isEdit: true }
			await addFn(params)
			uni.showToast({
				title: '添加成功',
				icon: 'success',
				mask: true,
				duration: 2000
			});
			this.inputValue = ''
			this.show = false;
		},

		editCategory(item) {
			if (!item.isEdit) return //只有自己新增的才可以编辑
			this.editCurrentData = item
			this.editInputValue = item.name
			this.editShow = true
		},
		editCancel() {
			this.editInputValue = ''
			this.editShow = false;
		},
		async editConfirm() {

			console.log('this.editCurrentData', this.editCurrentData)
			console.log('this.editInputValue', this.editInputValue)
			//没有改名字 就什么都不做 直接返回
			if (this.editCurrentData.name === this.editInputValue) {
				this.editCancel()
				return
			}
			const upDateFn = this.positive ? this.asyncUpdateShouRuCategory : this.asyncUpdateZhiChuCategory

			const payload = { id: this.editCurrentData.id, data: { name: this.editInputValue } }
			await upDateFn(payload)
			uni.showToast({
				title: '修改成功',
				icon: 'success',
				mask: true,
				duration: 2000
			});
			this.editCancel()

		}



	}
}
</script>

<style></style>
